<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>小米扫码</title>
    <style type="text/css">
        .con {
            /* 固定定位 */
            position: fixed;
            /* 挪动位置 */
            right: 5%;
            bottom: 10%;
        }

        .con a {
            /* 独占一行 */
            display: block;
            /* 设置了提示.note为绝对定位，则a应该为相对定位 */
            position: relative;
            /* 调整图标距离 */
            margin: 10px 0;
        }

        /* 提示默认隐藏 */
        .con a .note {
            display: none;
            /* 让提示脱离文档流，即设置position为绝对定位 */
            position: absolute;
            width: 100px;
            /* 挪动位置 */
            left: -105px;
            /* 文字对齐方式 */
            text-align: right;
            font-family: "微软雅黑 Semilight", serif;
        }

        .logo img {
            /* 图片大小 */
            width: 25px;
        }

        .hidden {
            /* 隐藏点击橙色效果 */
            display: none;
        }

        /* 悬停时默认图标隐藏 */
        .con > a:hover .static {
            display: none;
        }

        /* 悬停时隐藏图标显示 */
        .con > a:hover .hidden {
            display: inline-block;
        }

        /* 悬停时提示显示 */
        .con > a:hover .note {
            display: inline-block;
            color: red;
        }

        /* 产品设置 */
        ul {
            width: 80%;
            /* 居中 */
            margin: 0 auto;
        }

        ul > li {
            /* 删除li效果 */
            list-style-type: none;
            /* 强制元素共用一行 */
            display: inline-block;
        }

        /* 设置盒子阴影 */
        ul > li:hover img {
            box-shadow: 0 5px 30px 5px rgba(0, 0, 0, 0.1);
            position: relative;
            /* 盒子挪动 */
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
<ul>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
    <li><a href=""><img src="./../lib/images/product.jpg" alt="商品"></a></li>
</ul>
<div class="con">
    <a href="">
        <span class="note">
           <img src="./../lib/images/erweima.png" alt="二维码" width="100px"> 
        </span>
        <span class="logo">
            <span class="static"><img src="./../lib/images/1-1.png" alt="灰色手机"></span>
            <span class="hidden"><img src="./../lib/images/1-2.png" alt="橙色手机"></span>
        </span>
    </a>
    <a href="">
        <span class="note">
           个人中心 
        </span>
        <span class="logo">
            <span class="static"><img src="./../lib/images/2-1.png" alt="灰色人像"></span>
            <span class="hidden"><img src="./../lib/images/2-2.png" alt="橙色人像"></span>
        </span>
    </a>
    <a href="">
        <span class="note">
          售后服务  
        </span>
        <span class="logo">
            <span class="static"><img src="./../lib/images/3-1.png" alt="灰色扳手"></span>
            <span class="hidden"><img src="./../lib/images/3-2.png" alt="橙色扳手"></span>
        </span>
    </a>
    <a href="">
        <span class="note">
          人工客服  
        </span>
        <span class="logo">
            <span class="static"><img src="./../lib/images/4-1.png" alt="灰色耳机"></span>
            <span class="hidden"><img src="./../lib/images/4-2.png" alt="橙色耳机"></span>
        </span>
    </a>
    <a href="">
        <span class="note">
          购物车  
        </span>
        <span class="logo">
            <span class="static"><img src="./../lib/images/5-1.png" alt="灰色购物车"></span>
            <span class="hidden"><img src="./../lib/images/5-2.png" alt="橙色购物车"></span>
        </span>
    </a>
</div>
</body>
</html>